<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >黑名单</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="department_manager_content">
        <!-- 按钮栏 -->
        <el-row>
          <el-col :span="24">
            <div class="department_manager_top">
              <el-button size="mini" type="primary" @click="addFn()"
                >新增</el-button
              >
              <el-input
                v-model="searchKey"
                placeholder="请输入关键词"
                size="mini"
                style="width: 200px; margin-left: 10px"
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 5px"
                @click="searchFn()"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <div
          v-if="
            departmentListData != undefined && departmentListData.length > 0
          "
        >
          <el-row>
            <el-col :span="24">
              <el-table
                :data="departmentListData"
                border
                size="mini"
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center"
                  min-width="140"
                >
                </el-table-column>

                <el-table-column
                  prop="phone"
                  label="手机号"
                  width="140"
                  align="center"
                ></el-table-column>

                <el-table-column
                  prop="identity_number"
                  label="证件号"
                  min-width="180"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注"
                  min-width="180"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="created_at"
                  label="创建时间"
                  min-width="180"
                  align="center"
                ></el-table-column>

                <el-table-column label="操作" min-width="200" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="auditDetailFn(scope.$index, scope.row)"
                      >查看</el-button
                    >
                    <el-button
                      size="mini"
                      type="success"
                      @click="editFn(scope.$index, scope.row)"
                      :disabled="scope.row.release_status == 1"
                      >编辑</el-button
                    >

                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleteFn(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="department_manager_pagination">
                <el-pagination
                  @size-change="listSizeChange"
                  @current-change="listCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row v-else>
          <el-empty description="暂无数据"></el-empty>
        </el-row>
        <!-- 新增弹窗 -->
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          width="500px"
        >
          <el-form ref="dialogDetailForm" :model="detailFormData">
            <el-form-item
              label="姓名"
              prop="name"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="7"
                v-model="detailFormData.name"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="手机号"
              prop="phone"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="11"
                v-model="detailFormData.phone"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="证件号"
              prop="identity_number"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="30"
                v-model="detailFormData.identity_number"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="remark"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="30"
                v-model="detailFormData.remark"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogclose()">取 消</el-button>
            <el-button
              size="small"
              type="primary"
              @click="dialogDetailFormSubmit()"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- 编辑弹窗 -->
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisiblebianji"
          :close-on-click-modal="false"
          width="500px"
        >
          <el-form ref="dialogDetailForm" :model="detailFormData">
            <el-form-item
              label="姓名"
              prop="name"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="7"
                v-model="detailFormData.name"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="手机号"
              prop="phone"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="11"
                v-model="detailFormData.phone"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="证件号"
              prop="identity_number"
              maxlength="30"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="30"
                v-model="detailFormData.identity_number"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="remark"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                maxlength="30"
                v-model="detailFormData.remark"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogclosequxiao()"
              >取 消</el-button
            >
            <el-button size="small" type="primary" @click="edssd()"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- 详情弹窗 -->
        <el-dialog
          title="详情"
          :visible.sync="backlist"
          :close-on-click-modal="false"
          width="500px"
        >
          <el-form ref="dialogDetailForm" :model="detailFormData">
            <el-form-item
              label="姓名"
              prop="name"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input
                size="small"
                disabled
                v-model="backlists.phone"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="证件号"
              prop="identity_number"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.identity_number"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="remark"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.remark"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="remark"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.remark"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="来源人"
              prop="source_name"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.source_name"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="来源赛事名称"
              prop="event_name"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.event_name"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="创建时间"
              prop="created_at"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.created_at"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="backlists.updated_at != null"
              label="更新时间"
              prop="created_at"
              :label-width="formLabelWidth"
            >
              <el-input
                size="small"
                disabled
                v-model="backlists.updated_at"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="bancklois()"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </el-row>
  </div>
</template>
<style src="../../assets/css/department/departmentList.css" scoped></style>

<script>
export default {
  name: "DepartmentList",
  components: {},
  data() {
    return {
      departmentListData: [], // 数据列表
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      searchKey: "", // 搜索关键词
      loadingKey: false,
      loadingText: "",
      dialogTitle: "", // 弹窗标题
      dialogBtnKey: "", // 弹窗确认按钮控制; 1. 新增部门确认;2. 修改部门确认;
      dialogVisible: false, // 弹窗显示
      setrp: false, //弹窗显示
      dialogVisiblebianji: false,
      backlist: false,
      radio: "1",
      collecttype: "",
      ids: "", //部门id
      but: "",
      backlists: {},
      detailFormData: {
        id: "",
        name: "",
        phone: "",
        identity_number: "",
        remark: "",
      }, // 部门弹窗数据

      formLabelWidth: "90px",
    };
  },
  created: function () {
    this.getListDataFn();
  },
  methods: {
    // 获取列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/blacklist/index";
      let data = {
        page: this.currentPage,
        perPage: this.pageSize,
        keywords: this.searchKey,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            console.log(response);
            that.departmentListData = response.list;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 新增黑名单人员
    addFn: function () {
      let that = this;
      this.dialogTitle = "新增";
      this.dialogBtnKey = 1;
      that.dialogVisible = true;
      this.detailFormData = {
        name: "",
        phone: "",
        identity_number: "",
        remark: "",
      };
      //   this.$nextTick(function () {
      //
      //     // that.$refs.dialogDetailForm.clearValidate();
      //   });
    },
    // 修改部门
    editFn: function (index, row) {
      this.dialogTitle = "编辑";
      this.detailFormData = {
        id: row.id,
        name: row.name,
        phone: row.phone,
        identity_number: row.identity_number,
        remark: row.remark,
      };
      this.dialogVisiblebianji = true;
    },
    // 修改部门确认按钮
    edssd() {
      let idNumber = /^[A-Za-z0-9]+$/;
      if (!idNumber.test(this.detailFormData.identity_number)) {
        this.$message.error("证件号格式不正确");
        return false;
      }
      let url = "/admin/blacklist/update";
      let data = {
        id: this.detailFormData.id,
        name: this.detailFormData.name,
        phone: this.detailFormData.phone,
        identity_number: this.detailFormData.identity_number,
        remark: this.detailFormData.remark,
      };
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.dialogVisiblebianji = false;
            this.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },

    // 新增
    dialogDetailFormSubmit: function () {
      if (
        this.detailFormData.name == "" ||
        this.detailFormData.identity_number == ""
      ) {
        this.$message.error("请填写信息");
        return false;
      }
      let idNumber = /^[A-Za-z0-9]+$/;
      if (!idNumber.test(this.detailFormData.identity_number)) {
        this.$message.error("证件号格式不正确");
        return false;
      }

      let url = "/admin/blacklist/store";
      let data = {
        name: this.detailFormData.name,
        phone: this.detailFormData.phone,
        identity_number: this.detailFormData.identity_number,
        remark: this.detailFormData.remark,
      };
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.dialogVisible = false;
            this.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },

    // 关闭弹窗
    dialogclose: function () {
      this.dialogVisible = false;
    },
    dialogclosequxiao() {
      this.dialogVisiblebianji = false;
    },

    // 删除
    deleteFn: function (index, row) {
      let that = this;
      this.$confirm("确认删除该部门?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          let url = "/admin/blacklist/destroy";
          let data = {
            id: row.id,
          };
          that.loadingText = "处理中...";
          that.loadingKey = true;
          that.axios
            .post(url, data)
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 0) {
                that.$message.success("删除成功");
                let next = that.currentPage - 1;
                if (that.departmentListData.length == 1) {
                  that.currentPage = next >= 1 ? next : 1;
                }
                that.getListDataFn();
              } else {
                that.$message.error(response.msg);
              }
            })
            .catch(function (error) {
              that.loadingKey = false;
              console.log(error);
            });
        })
        .catch(() => {});
    },

    //点击查看
    auditDetailFn(index, row) {
      console.log(row);
      this.detailFormData = {
        id: row.id,
      };
      let url = "/admin/blacklist/show";
      let data = {
        id: this.detailFormData.id,
      };

      this.axios.post(url, data).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.backlists = res.blacklist;
          console.log(this.backlists);
        } else {
          that.$message.error(res.msg);
        }
      });

      this.backlist = true;
    },
    bancklois() {
      this.backlist = false;
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 搜索按钮
    searchFn: function () {
      this.currentPage = 1;
      this.getListDataFn();
    },
  },
};
</script>
<style>
.but {
  display: flex;
}
</style>


